<!DOCTYPE html>
<html lang="zxx">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="icon" href="images/favicon.png">
	<title>Runface - 动态精准护肤，给你的皮肤新的体验</title>

	<!--<link rel="stylesheet" href="css/bootstrap.css">-->
	<link rel="stylesheet" href="css/mdui.css">

	<link rel="stylesheet" href="css/materialize.css">
	<link rel="stylesheet" href="css/loaders.css">
	<link rel="stylesheet" href="css/lightbox.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/owl.carousel.min.css">
	<link rel="stylesheet" href="css/owl.theme.default.min.css">
	<link rel="stylesheet" href="css/style.css">
	<script>
        //取消浏览器的所有事件，使得active的样式在手机上正常生效
        document.addEventListener('touchstart',function(){
            return false;
        },true);
        // 禁止选择
        document.oncontextmenu=function(){
            return false;
        };
        // H5 plus事件处理
        function plusReady(){
            // Android处理返回键
            plus.key.addEventListener('backbutton',function(){
                ('iOS'==plus.os.name)?plus.nativeUI.confirm('确认退出？', function(e){
                    if(e.index>0){
                        plus.runtime.quit();
                    }
                }, 'HelloH5', ['取消','确定']):(confirm('确认退出？')&&plus.runtime.quit());
            },false);
            // 关闭启动界面
            plus.navigator.setStatusBarBackground('#D74B28');
            setTimeout(function(){
                plus.navigator.closeSplashscreen();
            },200);
        }
        if(window.plus){
            plusReady();
        }else{
            document.addEventListener('plusready',plusReady,false);
        }
	</script>
</head>
<body>


<!-- navbar -->
	<div class="navbar navbar-home">
		<div class="container">
			<div class="row">
				<div class="col s3">
					<div class="content-left">
						<a href="#slide-out" data-activates="slide-out" class="sidebar"><i class="fas fa-bars"></i></a>
					</div>
				</div>
				<div class="col s6">
					<div class="content-center">
						<a href="index.html"><h1>产品分类列表</h1></a>
					</div>
				</div>
				<div class="col s3">
					<div class="content-right">
						<div class="content-search">
							<a href="#slide-out-right" data-activates="slide-out-right" class="sidebar-right-search">
								<i class="fas fa-search"></i>
							</a>
						</div>
						<div class="content-cart">
							<a href="#slide-out-cart" data-activates="slide-out-cart" class="sidebar-right-cart">
								<i class="fas fa-shopping-cart"><sup>3</sup></i>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- end navbar -->


	<!-- sidebar left -->
	<div class="sidebar-panel">
		<ul id="slide-out" class="collapsible side-nav">
			<li class="list-top">
				<div class="user-view">
					<div class="image">
						<img src="images/logo.png" alt="logo相片">
					</div>
					<h3>Runface</h3>
					<span>您尚未登录，请登录</span>
				</div>
			</li>
			<li><a href="index.html"><i class="mdui-icon material-icons">home</i>主页</a></li>
			<li><a href="services.html"><i class="mdui-icon material-icons">grain</i>美容服务</a></li>
			<li class="active">
				<div class="collapsible-header active">
					发现<span><i class="fas fa-angle-right right"></i></span>
				</div>
				<div class="collapsible-body">
					<ul>
						<li><a href="blog.html">热门点评</a></li>
						<li><a href="blog-single.html">护肤基础</a></li>
					</ul>
				</div>
			</li>
			<li>
				<div class="collapsible-header">
					购物商城页面<span><i class="fas fa-angle-right"></i></span>
				</div>
				<div class="collapsible-body">
					<ul>
						<li><a href="product.html">产品</a></li>
						<li><a href="product-details.html">产品明细</a></li>
						<!--<li><a href="cart.html">购物车</a></li>-->
						<!--<li><a href="checkout.html">结算</a></li>-->
					</ul>
				</div>
			</li>
			<li style="display: none"><a href="login.html"><i class="mdui-icon material-icons">transfer_within_a_station</i>切换账户</a></li>
		</ul>
	</div>
	<!-- end sidebar left -->

	<!-- sidebar search -->
	<div class="sidebar-panel sidebar-search">
		<ul id="slide-out-right" class="collapsible side-nav">
			<li>
				<div class="form">
					<input type="search"><button class="button"><i class="fas fa-search"></i></button>
				</div>
				<div class="clear"></div>
			</li>
			<li><h5>热门搜索</h5></li>
			<li><a href="">敏感</a></li>
			<li><a href="">防晒</a></li>
			<li><a href="">美白</a></li>
			<li><a href="">痘痘</a></li>
			<li><a href="">毛孔</a></li>
			<li><a href="">卸妆</a></li>
			<li><a href="">性价比</a></li>
		</ul>
	</div>
	<!-- end sidebar search -->

	<!-- sidebar cart -->
	<div class="sidebar-panel sidebar-cart">
		<div id="slide-out-cart" class="collapsible side-nav">
			<div class="content">
				<div class="cart-img">
					<img src="images/product1.png" alt="">
				</div>
				<div class="cart-title">
					<a href="">Lipstick With Color Variants</a>
					<h5>$28</h5>
				</div>
				<div class="cart-remove">
					<a href=""><i class="fas fa-trash-alt"></i></a>
				</div>
				<div class="clear"></div>
			</div>
			<div class="content">
				<div class="cart-img">
					<img src="images/product2.png" alt="">
				</div>
				<div class="cart-title">
					<a href="">Soap Natural Ingredients</a>
					<h5>$11</h5>
				</div>
				<div class="cart-remove">
					<a href=""><i class="fas fa-trash-alt"></i></a>
				</div>
				<div class="clear"></div>
			</div>
			<div class="content">
				<div class="cart-img">
					<img src="images/product3.png" alt="">
				</div>
				<div class="cart-title">
					<a href="">Oil With Real Fruit Aroma</a>
					<h5>$32</h5>
				</div>
				<div class="cart-remove">
					<a href=""><i class="fas fa-trash-alt"></i></a>
				</div>
				<div class="clear"></div>
			</div>
			<div class="cart-button">
				<ul>
					<li>
						<button class="button">View Cart</button>
					</li>
					<li>
						<button class="button">Checkout</button>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<!-- end sidebar cart -->

	<!-- product -->
	<div class="product segments-page">
		<div class="container">
			<div class="section-title">
				<h3>Product</h3>
			</div>
			<div class="row">
				<div class="col s6">
					<div class="content">
						<img src="images/product1.png" alt="">
						<a href="product-details.html"><p>Lipstick With Color Variants</p></a>
						<h5>$20</h5>
					</div>
				</div>
				<div class="col s6">
					<div class="content">
						<img src="images/product2.png" alt="">
						<a href="product-details.html"><p>Soap Natural Ingredients</p></a>
						<h5>$20</h5>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col s6">
					<div class="content">
						<img src="images/product3.png" alt="">
						<a href="product-details.html"><p>Oil With Real Fruit Aroma</p></a>
						<h5>$20</h5>
					</div>
				</div>
				<div class="col s6">
					<div class="content">
						<img src="images/product4.png" alt="">
						<a href="product-details.html"><p>Makeup Brush With Bags</p></a>
						<h5>$20</h5>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col s6">
					<div class="content">
						<img src="images/product5.png" alt="">
						<a href="product-details.html"><p>Modern hair shaver</p></a>
						<h5>$20</h5>
					</div>
				</div>
				<div class="col s6">
					<div class="content">
						<img src="images/product6.png" alt="">
						<a href="product-details.html"><p>Cheap Original Scissors</p></a>
						<h5>$20</h5>
					</div>
				</div>
			</div>
			<div class="pagination pagination-circle">
				<ul>
					<li class="disabled"><a href="">1</a></li>
					<li><a href="">2</a></li>
					<li><a href="">3</a></li>
					<li><a href="">4</a></li>
					<li><a href="">5</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- end product -->

	<!--mdui-nav-bottom start-->
	<div class="mdui-bottom-nav-fixed">
		<div class="mdui-bottom-nav ">
			<a href="index.html" class="mdui-ripple ">
				<i class="mdui-icon material-icons">home</i>
				<label>主页</label>
			</a>
			<a href="product.html" class="mdui-ripple mdui-bottom-nav-active">
				<i class="mdui-icon material-icons">format_list_bulleted</i>
				<label>分类</label>
			</a>
			<a href="camera.html" class="mdui-ripple">
				<i class="mdui-icon material-icons">add_a_photo</i>
				<label>测一测</label>
			</a>
			<a href="custom.html" class="mdui-ripple">
				<i class="mdui-icon material-icons">bubble_chart</i>
				<label>定制</label>
			</a>
			<a href="mine.html" class="mdui-ripple">
				<i class="mdui-icon material-icons">person_pin_circle</i>
				<label>我的</label>
			</a>
		</div>
	</div>
	<!--mdui-nav-bottom end-->

	<script src="js/jquery.min.js"></script>
	<script src="js/materialize.js"></script>
	<script src="js/owl.carousel.min.js"></script>
	<script src="js/main.js"></script>
	<script src="js/mdui.js"></script>
	<!--<script src="js/bootstrap.js"></script>-->

</body>
</html>